<template>
   <div class="shopbag-list-item">
          <van-swipe-cell>
            <div class="shopbag-item">
              <div class="checkbox-box">
                <van-checkbox v-model="product.isCheck" checked-color="#365DED"></van-checkbox>
              </div>
              <div class="product-img">
                <img class="auto-img" :src="product.small_img" alt="">
              </div>
              <div class="pro-text-box">
                <div class="pro-text">
                  <div class="pro-name">
                    <div>{{product.name}}</div>
                    <div class="pro-rule">{{product.rule}}</div>
                  </div>
                  <div class="pro-enname">{{product.enname}}</div>
                </div>
                <div class="price-count">
                  <div class="price">&yen;{{product.price}}</div>
                  <div class="count-box">
                    <van-stepper v-model="product.count" theme="round" button-size="22" disable-input />
                  </div>
                </div>
              </div>
            </div>
            <template #right>
              <van-button square type="danger" text="删除" />
            </template>
          </van-swipe-cell>
        </div>
</template>

<script>
  export default {
    name: 'ShopbagItem',
    props: {
      product: {
        type: Object,
        default() {
          return {};
        }
      }
    }
  }
</script>

<style lang="less" scoped>
.pro-text-box{
  flex: 1;
}
.price{
  color: #0C34BA;
  font-size: 14px;
  font-weight: bold;
}
.count-box{
  margin-left: auto;
}
.price-count{
  display: flex;
  align-items: center;
}
.pro-rule{
  margin-left: 20px;
  color: #999;
  font-size: 12px;
}
.pro-name{
  font-size: 14px;
  color: #444;
  display: flex;
  align-items: center;
}

.pro-enname{
  color: #999;
}
.pro-text{
  margin-bottom: 20px;
}
.checkbox-box{
  margin-right: 10px;
}

.product-img{
  width: 80px;
  height: 80px;
  background-color: #ddd;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 10px;
}

  .shopbag-item{
    height: 80px;
    background-color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
  }

  .shopbag-list-item{
    /deep/ .van-button{
      height: 100%;
    }
  }
</style>